<template>
    <div>
        <div class="top">
            <span class="left">
                <span class="lbtn" @click="exit">首页</span>
            </span>
            <span class="center">
                <div class="title">智慧旅游可视化大数据展示平台</div>
            </span>
            <span class="right">
                <span class="rbtn">统计报告</span>
                <span class="date">{{ dateietm }}</span>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'

// 获取背景图dom

let router = useRouter()
let dateietm = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'))
// 声明定时器
let itemm = ref(0)
// 获取背景缩放比例

// 挂载时获取缩放比例
onMounted(() => {
    itemm.value = setInterval(() => {
        dateietm.value = moment().format('YYYY年MM月DD日 hh:mm:ss')
    }, 1000)
})
onBeforeUnmount(() => {
    clearInterval(itemm.value)
})
// 监听浏览器视口变化调用
// 退回首页
function exit() {
    router.push('/')
}
</script>

<style scoped lang="scss">
.top {
    width: 100%;
    height: 40px;
    display: flex;

    :nth-child(1) {
        flex: 1;
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        width: 100%;
        height: 100%;

        .lbtn {
            float: right;
            width: 150px;
            height: 40px;
            text-align: center;
            background: url(../../images/dataScreen-header-btn-bg-l.png) no-repeat;
            background-size: 100% 100%;
            color: #00E9FF;
            line-height: 40px;

        }
    }

    .center {
        flex: 2;

        .title {
            height: 75px;
            background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
            background-size: 100% 75px;
            font-size: 30px;
            line-height: 75px;
            text-align: center;
            color: #25D0E9;

        }

    }

    .right {
        flex: 1;
        background: url(../../images/dataScreen-header-right-bg.png) no-repeat;
        background-size: cover;

        .rbtn {
            width: 150px;
            height: 40px;
            text-align: center;
            background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
            background-size: 100% 100%;
            color: #00E9FF;
            float: left;
            line-height: 40px;
        }

        .date {
            color: #00E9FF;
            text-align: center;
            float: right;
            margin-right: 60px;
            line-height: 40px;
        }

    }
}</style>